<template>
  <div class="course-list">
    <!-- 头部结构 -->
    <div slot="header">
        <el-form :inline="true"
        :model="filterParams" ref="form">
          <el-form-item label="课程名称" prop="courseName">
          <el-input  placeholder="课程名称"
          v-model="filterParams.courseName"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
          <el-select v-model="filterParams.status">
            <el-option label="全部" value=""></el-option>
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleReset" :disabled="isLoading">重置</el-button>
            <el-button type="primary" @click="handleFiter" :disabled="isLoading">查询</el-button>
          </el-form-item>
        </el-form>
    </div>
    <!-- 主体结构 -->
    <el-card>
      <div slot="header">
        <span>查询结果</span>
        <el-button style="float:right;margin-top:-10px"
        @click="$router.push({
          name: 'course-create'
        })"
        type="primary">添加课程</el-button>
      </div>
      <!-- 课程展示区域-->
      <el-table
        :data="courses"
        v-loading="isLoading"
        style="width: 100%;margin-bottom: 20px">
        <el-table-column
          prop="id"
          label="ID"
          width="100">
        </el-table-column>
        <el-table-column
          prop="courseName"
          label="课程名称">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格">
        </el-table-column>
        <el-table-column
          prop="sortNum"
          label="排序">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              :disabled="scope.row.isStatusLoading"
              @change="onStateChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <!-- 通过作用域插槽取到当前这个课程的id  再把这个id通过参数传递给要跳转的组件-->
            <el-button
              size="mini"
              @click="$router.push({
                name:'course-edit',
                params: {
                  courseId: scope.row.id
                }
              })">
              编辑
            </el-button>
            <el-button
              size="mini"
              @click="$router.push({
                name:'course-section',
                params: {
                  courseId: scope.row.id,
                  courseName:scope.row.courseName
                }
              })">
              内容管理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页结构 -->
      <el-pagination style="float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="filterParams.currentPage"
        :page-sizes="[10, 15, 20, 50, 100, 200]"
        :page-size="filterParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        :disabled="isLoading">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getQueryCourses, changeState } from '@/services/course'
export default {
  name: 'CourseList',
  data () {
    return {
      filterParams: {
        // 分页设置
        courseName: '',
        status: '',
        // 筛选信息
        currentPage: 1,
        pageSize: 10
      },
      // 所有课程
      courses: [],
      // 控制加载状态
      isLoading: false,
      // 数据总条数
      totalCount: 0
    }
  },
  created () {
    this.loadCourses()
  },
  methods: {
    async loadCourses () {
      this.isLoading = true
      const { data } = await getQueryCourses(this.filterParams)
      // console.log(data)
      if (data.code === '000000') {
        // console.log(data.data.records)
        // 给媒体数据设置属性，标识状态是否处于切换中
        data.data.records.forEach(item => {
          item.isStatusLoading = false
        })
        this.courses = data.data.records
        this.totalCount = data.data.total
        this.isLoading = false
      }
    },
    // 每页显示的条数变化时触发
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.filterParams.pageSize = val
      // 修改了每页显示的条数,当前页面回到初始值 current: 1,
      this.filterParams.currentPage = 1
      this.loadCourses()
    },
    // 页数发生变化时触发
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.filterParams.currentPage = val
      this.loadCourses()
    },
    // 重置按钮点击操作
    handleReset () {
      this.$refs.form.resetFields()
      this.filterParams.currentPage = 1
      this.loadCourses()
    },
    // 提交筛选功能
    handleFiter () {
      // 请求数据前先将当前页面指定为第一页
      this.filterParams.currentPage = 1
      this.loadCourses()
    },
    // 上下架处理
    async onStateChange (course) {
      // 点击状态修改按钮，开启禁用状态
      course.isStatusLoading = true
      const { data } = await changeState({
        courseId: course.id,
        status: course.status
      })
      // console.log(data)
      if (data.code === '000000') {
        this.$message.success(`${course.status === 1 ? '上架' : '下架'}成功`)
      }
      // 点击状态修改完毕，关闭禁用状态
      course.isStatusLoading = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
